<template>
	<view>
		<view class="tabbox">
			<u-tabs
			    :list="list4"
				lineWidth="0"
				lineHeight="0"
				@click="clickItem"
			    :activeStyle="{
			        color: '#fff',
					backgroundColor:'#3772ff',
					paddingLeft: '15rpx', paddingRight: '15rpx',
					paddingTop: '10rpx', paddingBottom: '10rpx',
					height: '34px',
					width:'150rpx',
					lineHeight:'34px',
					borderRadius:'10rpx',
			    }"
			    inactiveStyle="padding:10rpx 15rpx; height:34px;width:180rpx;margin:0 5rpx;border:1px solid #ccc;line-height:34px;border-radius: 10rpx;"
			    itemStyle="padding:10rpx 15rpx; height: 50px;width:180rpx;margin:0 5rpx;"
			>
			</u-tabs>
			<view class="tabline">
				<view class="tribox" :style="{left:trianglePosition,right:rightPosition}">
					<view class="tabtri">
						<view class="tabtri2"></view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
    
</template>

<script>

    export default {
		props: {
		
		  list4: {
		    type: Array,
		    default: ''
		  }
		},
        data() {
            return {
               trianglePosition:'75rpx',
			   rightPosition:''
            }
        },
		methods: {
		            clickItem(item) {
		                console.log('item', item);
						if(item.value=='jbxx') this.trianglePosition = 75 + 'rpx'
						if(item.value=='jsxx') this.trianglePosition = (75 * 4)  + 'rpx'
						if(item.value=='czxx') this.trianglePosition = (75 * 6) - 15  + 'rpx'
						if(item.value=='jzxx') {
							this.rightPosition = 75  + 'rpx'
							this.trianglePosition=''
						}else{
							this.rightPosition = ''
						}
						console.log(this.trianglePosition, 'ttttt')
						this.$emit('tabItem', item)
		            }
				}
    }
</script>
<style scoped>
	.tabline{
		height: 1px;
		width: 100%;
		background-color: #3772ff;
		margin: 35rpx 0;
		position: relative;
	}
	.tribox{
		position: absolute;
		bottom: 0rpx;
	}
	.tabtri{
		position: relative;
		width: 0;
		height: 0;
		border-left: 30rpx solid transparent;
		  border-right: 30rpx solid transparent;
		  border-bottom: 30rpx solid #3772ff;
	}
	.tabtri2{
		position: absolute;
		right: -30rpx;
		top: 5rpx;
		width: 0;
		height: 0;
		border-left: 30rpx solid transparent;
		  border-right: 30rpx solid transparent;
		  border-bottom:30rpx solid #f6f6f6;
	}
	.tabbox{
		width: 750rpx;
		text-align: center;
		margin: 10px 0;
	}
</style>
